<template>
<div>
		<!-- 饿了么移动端的商品详情页
		 时间：2019年4月15日11:01:56
		 -->
		 
		 <!-- 头部 背景-->
		 <div class="div_top_bj" :style="marginTop">
			<img src="../../assets/goodsImg/top2.jpg" />
		 </div>
		 
		 <!-- 店铺标题-->
		 <div class="div_title">
			 <p>五芳斋回味餐厅(骏力路店) <i class="el-icon-caret-right"></i> </p>
			
			<ul>
				<li> 评价4.7 </li>
				<li> 月售434单 </li>
				<li> 蜂鸟专送约21分钟 </li>
			</ul>
			
			<!-- 优惠券 -->
			<div class="div_coupon">
				<div class="div_coupon_item1"></div>
				<div class="div_coupon_item2"></div>
				
				<span class="span_coupon_icon">￥</span>
				<span class="span_coupon_price">6</span>
				
				<img  src="../../assets/goodsImg/icon_1.png"/>
				<span>无门槛</span>
				<span class="div_coupon_get">领取</span>
			</div>
			
			<div class="div_coupon div_coupon_red">
				<div class="div_coupon_item1"></div>
				<div class="div_coupon_item2"></div>
				
				<span class="span_coupon_icon">￥</span>
				<span class="span_coupon_price">5</span>
				
				<span>满75可用</span>
				<span class="div_coupon_get">领取</span>
			</div>
			
		 </div>
		 
		 
		 <!-- 优惠-->
		 <div class="div_discount">
			 <label>满减</label> <span>满30减6，满50减15，满85减25</span>
			 
			 <a>4个优惠 <i class="el-icon-caret-bottom"></i> </a>
		 </div>
		 
		 <!-- 公告-->
		 <div class="div_notice">
			 <span>公告：特价餐和满减不能同时使用哦。百年老品牌，百年老品牌</span>
		 </div>
		 
		 <!-- 滑动会固定在顶部的导航-->
		 <div class="div_nav" :class="{div_nav_fixed:sortHidden}">
			 <ul>
				 <li>点餐</li>
				  <li>评价</li>
				   <li>商家</li>
			 </ul>
		 </div>
		 
		 <!-- 单独的一张图片-->
		 <div class="div_img">
			  <img  src="../../assets/goodsImg/top3.jpg"/>
		 </div>
		
		<!-- 商家推荐   recommend(推荐)-->
		<div class="div_recommend">
			<p>商家推荐</p>
			<ul>
				<li v-for="item in 5">
					<div>
						<img src="../../assets/goodsImg/topList1.jpg" />
					<br />
					<label class="label_goodsName">性感魔都小排饭啦啦啦 </label>
					<br />
					<span>月售17 好评率100% </span><br />
					<label class="label_price">￥28</label>
					<i class="el-icon-circle-plus"></i>
					</div>
				</li>
			</ul>
		</div>
		
		
		<!-- 商品列表  -->
		<el-container class="el_container">
				
		<el-aside width="85px" class="el_aside">
			
		<div class="div_goodsList">
			<div class="div_list_left">
				<ul>
					<a v-for="(item,index1) in listLeft" :key=index1 :href=item.maohref>
					<li  
					:class="{li_checked:index==index1}"
					@click="Check(index1,$event)"> 
					{{item.title}} </li></a>
					
				</ul>
			</div>
		</div>
		
		</el-aside>
 

    <el-main class="el_main">
		<div class="div_el_main" @scroll="scrollMe($event)">
		<div class="div_list_main" 
		v-for="(item,index) in theList" :key="index" :ref="item.ref">
			<label class="label_hot" :id="item.maoName">{{item.title}} </label>
			<span>{{item.text}}</span>
			<ul>
				<li v-for="(item2,index2) in item.goodsList" :key="index2"> 
				<div class="div_list_item">
					<img :src="item2.imgSrc" />
					<div>
						<p>{{item2.goodsName}}</p>
						<span>{{item2.discribe}}</span><br />
						<span>月售{{item2.nums}}份 好评率{{item2.hp}}</span> <br />
						
						<button class="btn_small"
						v-for="(item3,index3) in item2.smallBtn"
						:key="index3"
						:class="{btn_small_white:item3.white,btn_small_red:item3.red}"
						>
						<!--  -->
						{{item3.btntext}}</button>
						
						<br/>
						
						<label class="label_price">￥{{item2.price}}</label>
						<span class="span_price_no">{{item2.priceNo}}</span>
						<i class="el-icon-circle-plus"></i>
					</div>
				</div> 
				</li>
			</ul>
		</div>
		</div>
	</el-main>
	</el-container>
	
  
<!-- 底部 -->
<div class="div_footer">
	<div class="div_shoppingCar">
		<div>
			<img src="../../assets/goodsImg/shopCar.png" />
		</div>
	</div>
	
	<div class="div_fotter_text">
		<span >未选购商品</span> <br />
		<span>另需配送费3.5元</span>
	</div>
	
	<label class="label_footer_price">￥20起送</label>
	
</div>		
		
		
</div>
</template>

<script>
	export default{
		data(){
			return{
				marginTop:{},
				titleY:[],
				index:0,
				sortHidden:false,
				
				listLeft:[
					  {title:"热销",maohref:"#mao1" },
					  {title:"优惠",maohref:"#mao2" },
					  {title:"五芳青团",maohref:"#mao3" },
					  {title:"丰盛套餐",maohref:"#mao4" },
					  {title:"超值简餐",maohref:"#mao5" },
					  {title:"招牌粽子",maohref:"#mao6" },
					  {title:"美味小吃",maohref:"#mao7" },
					  {title:"豆浆茶饮",maohref:"#mao8" },
					  {title:"营养粥品",maohref:"#mao9" },
					  {title:"混沌面条",maohref:"#mao10" },
					  {title:"滋补靓汤",maohref:"#mao11" },
					  {title:"糕棕零售",maohref:"#mao12" },
					  {title:"元气早餐",maohref:"#mao13" },
					  {title:"特惠组合",maohref:"#mao14" },
					  {title:"卡券兑换",maohref:"#mao15" },],
					
			 theList:[{
				 ref:"list1",
				 title:"热销",
				 maoName:"mao1",
				 text:"大家喜欢吃，才叫真好吃",
				 goodsList:[{
				 imgSrc:require("../../assets/goodsImg/list2.jpg"),
				 goodsName:"胖小笼",
				 discribe:"五芳斋出品，品质保障，口感回味无穷",
				 nums:67,
				 hp:"100%",
				 price:28,
				 priceNo:"￥20",
				 smallBtn:[{btntext:"5.7折",white:true,red:false},
						{btntext:"剩8份",white:false,red:true}]
			 },{
				 imgSrc:require("../../assets/goodsImg/list1.jpg"),
				 goodsName:"胖小笼",
				 discribe:"五芳斋出品，品质保障，口感回味无穷",
				 nums:67,
				 hp:"100%",
				 price:28,
				  smallBtn:[{btntext:"5.7折",white:true,red:false},
				 			{btntext:"每单限1份优惠",white:true,red:false}]
			 },{
				 imgSrc:require("../../assets/goodsImg/list3.jpg"),
				 goodsName:"胖小笼",
				 discribe:"五芳斋出品，品质保障，口感回味无穷",
				 nums:67,
				 hp:"100%",
				 price:28,
				 priceNo:"￥30",
			 },{
				 imgSrc:require("../../assets/goodsImg/list4.jpg"),
				 goodsName:"胖小笼",
				 discribe:"五芳斋出品，品质保障，口感回味无穷",
				 nums:67,
				 hp:"100%",
				 price:28
			 }]
			 },{
				 ref:"list2",
				 title:"优惠",
				 maoName:"mao2",
				  text:"美味又实惠，大家快来抢",
				 goodsList:[{
				 imgSrc:require("../../assets/goodsImg/list2.jpg"),
				 goodsName:"胖小笼",
				 discribe:"五芳斋出品，品质保障，口感回味无穷",
				 nums:67,
				 hp:"100%",
				 price:28,
				  smallBtn:[{btntext:"5.7折",white:true,red:false},
				 			{btntext:"每单限1份优惠",white:true,red:false}]
			 },{
				 imgSrc:require("../../assets/goodsImg/list1.jpg"),
				 goodsName:"胖小笼",
				 discribe:"五芳斋出品，品质保障，口感回味无穷",
				 nums:67,
				 hp:"100%",
				 price:28,
				  smallBtn:[{btntext:"5.7折",white:true,red:false},
				 						{btntext:"剩8份",white:false,red:true}]
			 },{
				 imgSrc:require("../../assets/goodsImg/list3.jpg"),
				 goodsName:"胖小笼",
				 discribe:"五芳斋出品，品质保障，口感回味无穷",
				 nums:67,
				 hp:"100%",
				 price:28
			 },{
				 imgSrc:require("../../assets/goodsImg/list4.jpg"),
				 goodsName:"胖小笼",
				 discribe:"五芳斋出品，品质保障，口感回味无穷",
				 nums:67,
				 hp:"100%",
				 price:28
			 }]
			 },{
								 ref:"list3",
				 				 title:"五芳青团",
								 maoName:"mao3",
				 				 goodsList:[{
				 				 imgSrc:require("../../assets/goodsImg/list2.jpg"),
				 				 goodsName:"胖小笼",
				 				 discribe:"五芳斋出品，品质保障，口感回味无穷",
				 				 nums:67,
				 				 hp:"100%",
				 				 price:28,
				 				  smallBtn:[{btntext:"5.7折",white:true,red:false},
				 				 			{btntext:"每单限1份优惠",white:true,red:false}]
				 },{
				 				 imgSrc:require("../../assets/goodsImg/list1.jpg"),
				 				 goodsName:"胖小笼",
				 				 discribe:"五芳斋出品，品质保障，口感回味无穷",
				 				 nums:67,
				 				 hp:"100%",
				 				 price:28,
				 				  smallBtn:[{btntext:"5.7折",white:true,red:false},
				 				 						{btntext:"剩8份",white:false,red:true}]
				 },{
				 				 imgSrc:require("../../assets/goodsImg/list3.jpg"),
				 				 goodsName:"胖小笼",
				 				 discribe:"五芳斋出品，品质保障，口感回味无穷",
				 				 nums:67,
				 				 hp:"100%",
				 				 price:28
				 },{
				 				 imgSrc:require("../../assets/goodsImg/list4.jpg"),
				 				 goodsName:"胖小笼",
				 				 discribe:"五芳斋出品，品质保障，口感回味无穷",
				 				 nums:67,
				 				 hp:"100%",
				 				 price:28
				 }]
				 
			 },{
								 ref:"list4",
				 				 title:"丰盛套餐",
								 maoName:"mao4",
				 				 goodsList:[{
				 				 imgSrc:require("../../assets/goodsImg/list2.jpg"),
				 				 goodsName:"胖小笼",
				 				 discribe:"五芳斋出品，品质保障，口感回味无穷",
				 				 nums:67,
				 				 hp:"100%",
				 				 price:28,
				 				  smallBtn:[{btntext:"5.7折",white:true,red:false},
				 				 			{btntext:"每单限1份优惠",white:true,red:false}]
				 },{
				 				 imgSrc:require("../../assets/goodsImg/list1.jpg"),
				 				 goodsName:"胖小笼",
				 				 discribe:"五芳斋出品，品质保障，口感回味无穷",
				 				 nums:67,
				 				 hp:"100%",
				 				 price:28,
				 				  smallBtn:[{btntext:"5.7折",white:true,red:false},
				 				 						{btntext:"剩8份",white:false,red:true}]
				 },{
				 				 imgSrc:require("../../assets/goodsImg/list3.jpg"),
				 				 goodsName:"胖小笼",
				 				 discribe:"五芳斋出品，品质保障，口感回味无穷",
				 				 nums:67,
				 				 hp:"100%",
				 				 price:28
				 },{
				 				 imgSrc:require("../../assets/goodsImg/list4.jpg"),
				 				 goodsName:"胖小笼",
				 				 discribe:"五芳斋出品，品质保障，口感回味无穷",
				 				 nums:67,
				 				 hp:"100%",
				 				 price:28
				 }]
				 
			 }],
			
			
			
			}
		},mounted() {
			window.addEventListener('scroll',this.handleScroll);
			
			let title=document.querySelectorAll(".label_hot");
			title.forEach((item)=>{
			this.titleY.push(item.offsetTop-903);
		});
		console.log(this.titleY);
		},methods:{
			handleScroll(){
				let scrollTop = window.pageYOffset || 
				 document.documentElement.scrollTop ||
				 document.body.scrollTop;
				
				 if(scrollTop>240){
					 this.sortHidden = true;
					 this.marginTop={
						 marginTop:'50px',
					 };
					 
				 }else{
					  this.sortHidden = false;
					  this.marginTop={};
				 }
			},
			
			scrollMe(event){
				let cur_scroll=event.target.scrollTop;
				// console.log(cur_scroll);
				 //console.log(this.titleY[this.index+1]);
				if(cur_scroll>this.titleY[this.index+1]){
					if(this.index===this.titleY.length-1){
						this.index=this.titleY.length-1;
					}else{
						this.index++;
					}
					
				}
				if(cur_scroll<=this.titleY[this.index]){
					if(this.index===0){
						this.index=0;
					}else{
						this.index--;
					}
				}
			},
			
			Check(liIndex){
				this.index = liIndex;
				let ref = this.theList[liIndex].ref;
				console.log(ref);
				console.log(this.$refs[ref][0]);
				
				//console.log(this.$refs[ref][0].scrollTop);
				
				let crollTop=document.documentElement.scrollTop-50; 
				console.log(crollTop);
				
			}
		}
	}
	
</script>

<style lang="scss">
	@import "../../assets/css/elmGoodsList.scss";
</style>
